var DragLeft, DragRight, DragTop, DragBottom;
var ItemLeft, ItemRight, ItemTop, ItemBottom;
var CookieName = "pos";
String.prototype.trim = function (reg) {
    if (reg) return this.replace(reg, ""); else return this.replace(/^\s*|\s*$/g, "");
}

function $(Id) {
    return document.getElementById(Id);
}

function SaveCookie() {
    var cstr = "var PosArr=[];";
    var div = document.getElementsByTagName("div");
    for (var i = 0; i < div.length; i++) {
        if (div[i].className == "item" && div[i].id) {
            cstr += "PosArr['" + div[i].id + "']={top:'" + div[i].style.top + "',left:'" + div[i].style.left + "'};";
        }
    }
    var d = new Date();
    d.setDate(d.getDate() + 30);
    document.cookie = CookieName + "=" + escape(cstr) + ";expires=" + d.toGMTString()
}

function ReadCookie() {
    var str = document.cookie;
    var m = str.match(new RegExp(CookieName + "=([^;]+);?", "i"));
    if (m) return unescape(m[1]); else return "";
}

window.onload = function () {
    var cstr = ReadCookie();
    var Pos;
    if (cstr.trim() != "") eval(cstr);
    //执行cookie的代码生产数组
    var Items = document.getElementsByTagName("div");
    for (var i = 0; i < Items.length; i++) {
        if (Items[i].className == "item") {
            Pos = typeof (PosArr) == "undefined" ? null : PosArr[Items[i].id];
            if (Pos) {
                Items[i].style.top = Pos.top;
                Items[i].style.left = Pos.left;
            }
            Items[i].onmousedown = MouseDown;
        }
    }
    var c = $("Left");
    ItemLeft = parseInt(c.style.left);
    ItemTop = parseInt(c.style.top);
    c = $("Contain");
    DragLeft = parseInt(c.style.left);
    DragTop = parseInt(c.style.top);
}
var OL, OT, ex, ey;
var MoveDiv = null;

function MouseDown(e) {
    MoveDiv = this;
    OL = parseInt(MoveDiv.style.left);
    OT = parseInt(MoveDiv.style.top);
    MoveDiv.style.left = OL - 5 + "px"
    MoveDiv.style.top = OT - 5 + "px"
    MoveDiv.className = "item Copy";
    e = e || event;
    ex = e.clientX;
    ey = e.clientY;
    var c = $("Left");
    ItemBottom = ItemTop + parseInt(c.style.height) - MoveDiv.offsetHeight;
    ItemRight = ItemLeft + parseInt(c.style.width) - MoveDiv.offsetWidth;
    c = $("Contain");
    DragBottom = DragTop + parseInt(c.style.width) - MoveDiv.offsetHeight;
    DragRight = DragLeft + parseInt(c.style.height) - MoveDiv.offsetWidth;
}

document.onmousemove = function (e) {
    if (MoveDiv) {
        e = e || event;
        var left = e.clientX - ex + OL;
        var top = e.clientY - ey + OT;
        if (top < DragTop) top = DragTop; else if (top > DragBottom) top = DragBottom;
        if (left > DragRight) left = DragRight;
        MoveDiv.style.left = left + "px";
        MoveDiv.style.top = top + "px";
    }
};
document.onmouseup = function (e) {
    if (MoveDiv) {
        e = e || event;
        var left = e.clientX - ex + OL;
        var top = e.clientY - ey + OT;
        if ((left >= ItemLeft && left <= ItemRight) && (top >= ItemTop && top <= ItemBottom)){
            //在左边框内
             MoveDiv.className="item"; MoveDiv=null; return; } else if(left<DragLeft){
            //如果不在右边的框内，还原成原来的位置
            MoveDiv.style.left = OL + "px";
            MoveDiv.style.top = OT + "px";
            MoveDiv.className = "item";
            MoveDiv = null;
            return;
        }
        MoveDiv.className = "item";
        MoveDiv = null;
    }
}
window.onbeforeunload = function () {
    SaveCookie();
}